html {
  font-size: $spring-font-size;
  font-family: $spring-font-family;
  color: $light-color;
  font-weight: 300;
  line-height: 1.8rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: $spring-font-family;
  background-color: $light-background;
  margin: 0;
}

#app {
  max-width: $spring-max-width;
  margin: 0 auto;
  position: relative;
}

#side-left,
#side-right {
  position: absolute;
  .side-container {
    width: 75px;
    position: fixed;
    top: 0;
    z-index: 200;
    min-height: 100%;
    height: 100%;
    text-align: center;
  }
}

#side-left {
  .side-container {
    border-right: 1px solid rgba(darken($light-border, 15), 0.4);
  }
  a {
    $size: 30px;
    display: block;
    margin: 0.2rem auto;
    color: $light-color;
    padding: 0;
    cursor: pointer;
    width: $size + 12px;
    height: $size + 12px;
    @include transition(color $spring-transition-duration);
    @include outline;
    .a-content {
      display: block;
      box-shadow: none;
      outline: 0 none;
      padding: 6px;
      width: $size;
      height: $size;
    }
    svg {
      display: block;
      width: $size;
      height: $size;
    }
    &:hover {
      color: $light-primary;
    }
  }
  .social {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 5rem;
    a {
      $size: 30px;
      svg {
        width: $size;
        height: $size;
      }
    }
  }
  .navigation-action {
    position: absolute;
    top: 20px;
    left: 0;
    width: 5rem;
  }
}

#side-right {
  right: 75px;
  .side-container {
    margin-left: auto;
    background: $light-background;
    padding: 20px 0;
    z-index: 198;
    border-left: 1px solid $light-border;
  }
}

#main {
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 110px;
  max-width: $spring-max-width;
}

// Header

#header {
  h1,
  h2 {
    margin: 0;
  }
  h1.logo {
    max-width: 320px;
    padding: 2rem 0;
    a {
      @include outline;
      display: block;
      margin-left: -6px;
      color: $light-color;
      .logo-content {
        display: block;
        outline: none;
        box-shadow: none;
        padding: 6px;
      }
      svg {
        display: block;
      }
      .st0 {
        fill: $light-primary;
      }
      .st1 {
        fill: #ffffff;
      }
    }
  }
  h1.logo-mobile {
    max-width: 140px;
    padding: 1rem 12px;
  }
  .header-mobile {
    border-bottom: 1px solid $light-border;
    margin: 0 -12px 0.8rem -12px;
    .hamburger {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
  .switch-mobile {
    position: absolute;
    top: 28px;
    right: 60px;
    border-right: 1px solid $light-color;
    height: 34px;
    padding: 0 12px 0 8px;
    button {
      color: $light-color;
      background-color: transparent;
      border: 0;
      padding: 4px;
      outline: none;
    }
    svg {
      display: block;
      height: 26px;
    }
  }
  h2 {
    padding: 0.8rem 0 1rem;
    strong,
    span {
      display: block;
    }
    strong {
      font-size: 42px;
      font-weight: 600;
      line-height: 2.5rem;
      padding-bottom: 0.4rem;
    }
    span {
      font-weight: 400;
      font-size: 22px;
      line-height: 2rem;
      font-weight: 600;
    }
  }
  p {
    font-size: 16px;
    font-weight: 100;
    line-height: 1.6rem;
    margin-top: 0.3rem;
  }
}

// Divider

hr.divider {
  border: 0 none;
  border-top: 1px solid $light-border;
  margin: 0.2rem 0 2rem;
}

// Colset

.colset {
  display: flex;
  .left,
  .right {
    flex: 50%;
  }
  .left {
    padding-right: 5rem;
    flex: 50%;
    .left {
      padding-right: 1rem;
    }
  }
  .right {
  }
}

.col-sticky {
  position: sticky;
  top: 20px;
}

.colset-2 {
  display: flex;
  background: linear-gradient($light-border, $light-border) no-repeat 60%/1px
    100%;
  .column {
    min-height: 240px;
    flex: 40%;
    &:first-child {
      padding-right: 4rem;
      flex: 60%;
    }
  }
}

// Control

.control {
  padding: 0.6rem 0;
  .label {
    font-weight: 600;
    font-size: $spring-font-size + 2;
  }
}

.control-inline {
  display: flex;
  label {
    white-space: nowrap;
    font-weight: 500;
    flex: 110px 0;
    text-align: right;
  }
  input,
  .group-radio {
    margin-left: 1.3rem;
    font-weight: 300;
    flex: 1;
  }
  input {
    color: $light-color;
    background: $light-background;
    max-width: 520px;
  }
}

.label-2 {
  white-space: nowrap;
  font-weight: 500;
}

// Radio

.radio {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: $light-color;
  margin-right: 1.5rem;
  margin-left: -5px;
  cursor: pointer;
  line-height: 18px;

  .radio-content {
    display: inline-block;
    padding: 6px;
    padding-left: 30px;
    outline: none;
    box-shadow: none;
  }
  @include outline;
  .caret {
    display: block;
    content: ' ';
    width: 12px;
    height: 12px;
    background: $light-background;
    position: absolute;
    top: 6px;
    left: 6px;
    border: 2px solid $light-color;
    box-shadow: none;
    outline: none;
    border-radius: 10px;
  }
  &:hover {
    .caret {
      border: 2px solid $light-primary;
    }
  }
  &.checked {
    color: $light-primary;
    .caret {
      background: $light-primary;
      border-color: $light-primary;
    }
  }
  &.err {
    color: #d60000;
    cursor: not-allowed;
    .caret {
      background: #d60000;
      border: 2px solid #d60000;
    }
  }
}

// input

.input {
  display: block;
  border: 0;
  outline: none;
  border-bottom: 3px solid $light-color;
  line-height: 16px;
  font-family: $spring-font-family;
  font-size: 15px;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 100%;
  padding: 0.35rem 0 0.55rem;
  border-radius: 0;
  background: #fff;
  font-weight: 300;
  &:focus {
    border-color: $light-primary;
  }
  &::placeholder {
    color: $light-color;
    font-style: italic;
    font-weight: 100;
  }
}

// Panel

.panel {
  overflow: hidden;
  max-height: 0;
  @include transition(all $spring-transition-duration * 3);
  &.panel-active {
    max-height: 600px;
  }
  .panel-wrap {
    border-top: 0 none;
  }
}

// Button

a.button,
button.button {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  border: 2px solid $light-color;
  color: $light-color;
  padding: 0;
  font-size: $spring-font-size - 1;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.23rem;
  overflow: hidden;
  margin-right: 1rem;
  cursor: pointer;
  background: transparent;
  @include transition(all calc($spring-transition-duration / 2));
  z-index: 1;
  background: $light-background;
  font-family: $spring-font-family;
  &:focus {
    outline: none;
    box-shadow: 0 0 0 4px $light-border;
  }
  span {
    display: inline-block;
    z-index: 1;
    padding: 0.7rem 1.2rem 0.6rem;
    &.secondary {
      font-weight: 400;
      margin-left: -10px;
      padding-left: 0;
    }
    span span {
      padding: 0;
    }
  }
  span.button-content {
    display: inline-block;
    padding: 0;
  }
  &:before {
    content: '';
    display: block;
    position: absolute;
    background: $light-color;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    @include transition(all calc($spring-transition-duration / 2));
    z-index: -1;
  }
  &:hover,
  &:disabled {
    color: white;
    &:before {
      opacity: 1;
    }
  }
  &.active {
    color: white;
    &:before {
      width: 100%;
    }
  }
  &.inverse {
    &:before {
      bottom: 0;
      width: 100%;
      right: 0;
      top: 0;
      height: 100%;
    }
    &:hover {
      &:before {
        opacity: 1;
      }
    }
    &.top {
      &:before {
      }
    }
    &.active {
      color: white;
      &:before {
        opacity: 1;
      }
    }
  }
  &.lg {
    font-size: $spring-font-size + 1;
    span {
      padding: 0.9rem 1.5rem 0.8rem;
    }
  }
}

// Buttons

.buttons {
  padding: 1rem 0;
  .button:last-child {
    margin-right: 0;
  }
}

.buttons-center {
  text-align: center;
}

// Switch

.switch {
  a.button {
    $size: 20px;
    padding: 0;
    display: block;
    height: auto;
    width: 34px;
    margin: 0 auto;
    z-index: 1;
    svg {
      display: block;
      width: $size;
      height: $size;
    }
    &:first-child {
      border-bottom: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    &:focus {
      z-index: 0;
    }
    .button-content {
      display: inline-block;
      outline: none;
      box-shadow: none;
      padding: 6px 7px 2px;
    }
  }
}

// Actions

.actions {
  display: block;
  text-align: center;
  bottom: 0;
  z-index: 3;
  position: fixed;
  right: 75px;
  left: 75px;
  .actions-container {
    background: $light-background-seconday;
    padding: 20px 0.5rem;
    margin: 0 auto;
    max-width: $spring-max-width - (82 * 2);
    height: 50px;
  }
  .button {
    font-size: $spring-font-size + 1;
    span {
      padding: 0.9rem 1.5rem 0.8rem;
    }
    &:focus {
      box-shadow: 0 0 0 4px darken($light-border, 6);
    }
    &:last-child {
      margin-right: 0;
    }
  }
}

.colset-main {
  padding-bottom: 90px;
  background: linear-gradient($light-border, $light-border) no-repeat center/1px
    100%;
}

.form {
  position: relative;
}

.warnings {
  background: $light-background;
  margin-bottom: 1rem;
  ul {
    margin: 4px 0;
  }
}

.control-error {
  color: #d60000;
  p {
    margin: 0;
    padding: 0;
  }
}

.icon-time {
  .st0 {
    fill: none;
    stroke: #000000;
    stroke-width: 3;
    stroke-miterlimit: 10;
  }
}

.warnings {
  $color: #e8ba00;
  position: relative;
  margin-bottom: $spring-8points;
  padding: $spring-8points * 2;
  line-height: 26px;
  margin: 0 auto;
  margin-bottom: 1rem;

  border: 1px solid $light-border;
  border-left: 6px solid $color;
  color: darken($color, 8);
  font-weight: 600;
  .close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 12px;
    height: 28px;
    cursor: pointer;
    opacity: 0.7;
    color: #8f2500;
    svg {
      width: 14px;
    }
    &:hover {
      opacity: 1;
    }
  }
  ul {
    color: $light-color;
    padding: 0;
    padding-left: 20px;
    margin: 0;
    font-weight: 300;
  }
  strong.warn {
    color: darken($color, 8);
  }
  li {
    padding: 0;
    margin: 0;
  }
}

// Navigation

.navigation {
  background: $light-primary;
  position: fixed;
  z-index: 199;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  color: white;
  overflow-x: hidden;
  overflow-y: auto;
  .navigation-content {
    padding: 0;
    max-width: $spring-max-width;
    margin: 0 auto;
    .navigation-content-wrap {
      margin: 0 110px;
    }
    #header h1.logo a .st0 {
      fill: white;
    }
    #header h1.logo a .st1 {
      fill: $light-primary;
    }
    #header h2 {
      color: #222;
    }
    #header .switch-mobile {
      display: none;
    }
  }
  ul {
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      a {
        font-size: 32px;
        line-height: 60px;
        font-weight: 600;
        color: white;
        text-decoration: none;
        &:hover {
          color: #222;
        }
        &:focus {
          outline: none;
          box-shadow: none;
          color: #222;
        }
      }
    }
  }
  .copyright {
    padding-top: 2rem;
    padding-bottom: 1rem;
    a {
      color: white;
      &:hover {
        color: #222;
      }
      &:focus {
        box-shadow: none;
        outline: none;
        color: #222;
      }
    }
  }
}

.navigation-enter {
  top: -100%;
}

.navigation-enter-active {
  transform: translateY(100%);
  @include transition(transform 500ms);
}

.navigation-exit {
  top: 0;
}

.navigation-exit-active {
  transform: translateY(-100%);
  @include transition(transform 500ms);
}

#side-left {
  background: white;
  @include transition(all 100ms);
  &.is-open {
    background: $light-primary;
    border-right: 1px solid rgba(#fff, 0.2);
    a {
      color: white;
      &:hover {
        color: rgba(#fff, 0.7);
      }
    }
  }
}

// Layout container

.layout-container {
  margin: 0 5rem;
  height: 100%;
  position: relative;
  .layout-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 90px;
    padding: 0 2rem;
    overflow: auto;
  }
  .layout-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: $light-background-seconday;
    padding: 20px 0.5rem;
    z-index: 3;
    height: 50px;
    text-align: center;
    margin: 0 -5rem;
    .button {
      font-size: $spring-font-size + 1;
      span {
        padding: 0.9rem 1.5rem 0.8rem;
      }
      &:focus {
        box-shadow: 0 0 0 4px darken($light-border, 6);
      }
    }
  }
}

// Explore dependencies

.dialog-dependencies {
  position: fixed;
  z-index: 501;
  $width: 800px;
  width: $width;
  margin-left: -(calc($width / 2));
  left: 50%;
  top: 40px;
  bottom: 40px;
  &-enter {
    opacity: 0;
  }
  &-enter-active {
    opacity: 1;
    @include transition(all 300ms);
  }
  &-exit {
    opacity: 1;
  }
  &-exit-active {
    opacity: 0;
    @include transition(all 300ms);
  }
  h1,
  h2 {
    margin: 0;
    padding: 0;
  }
  h1 {
    padding: 2rem 0 0.5rem;
    font-size: 30px;
  }
  h2 {
    padding: 1.5rem 0 0.5rem;
    font-size: 24px;
  }
  ul {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    &::-webkit-scrollbar {
      height: 6px;
      width: 6px;
      background: $light-background;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(black, 0.3);
    }
    li {
      background: $light-background;
      padding: 0;
      margin: 0;
      list-style: none;
      border-top: 1px solid $light-border;
      a.dependency {
        display: block;
        position: relative;
        line-height: 1.7rem;
        color: $light-color;
        text-decoration: none;
        padding: 12px 1rem;
        padding-right: 45px;
        span,
        strong {
          display: block;
          cursor: pointer;
        }
        span.group {
          display: inline-block;
          background: $light-primary;
          color: #fff;
          font-size: $spring-font-size - 2;
          padding: 4px 0.6rem 1px;
          line-height: 18px;
          margin-left: 0.6rem;
          text-transform: uppercase;
        }
        strong {
          font-size: $spring-font-size + 2;
          font-weight: 600;
        }
        .icon-enter {
          display: none;
          $height: 18px;
          fill: #fff;
          position: absolute;
          top: 50%;
          margin-top: -(calc($height / 2));
          height: $height;
          right: 15px;
        }
        &.selected {
          color: white;
          background: $light-primary;
          margin-bottom: -1px;
          margin-top: -1px;
          padding: 13px 1rem;
          padding-right: 45px;
          box-shadow: inset 0 1px 0 rgba(white, 0.2);
          &:hover {
            strong {
              color: white;
            }
          }
          span.group {
            background: white;
            color: $light-color;
          }
          .icon-enter {
            display: block;
          }
        }
        &.disabled,
        &.disabled:hover,
        &.disabled.selected {
          background: white;
          cursor: not-allowed;
          color: rgba($light-color, 0.4);
          margin-bottom: 0;
          margin-top: 0;
          padding: 12px 1rem;
          padding-right: 45px;
          span,
          strong {
            cursor: not-allowed;
          }
          strong {
            color: rgba($light-color, 0.4);
          }
          &:focus {
            outline: none;
          }
          span.group {
            background: $light-border;
            color: rgba($light-color, 0.4);
          }
          .icon-enter {
            display: none;
          }
        }
      }
      span.invalid {
        color: #d60000;
        font-weight: 500;
      }
    }
    li.group-title {
      position: sticky;
      top: 0;
      z-index: 9;
      span {
        display: inline-block;
        background: $light-primary;
        color: #fff;
        font-size: $spring-font-size - 2;
        padding: 4px 0.6rem 1px;
        line-height: 18px;
        margin-left: 0.6rem;
        text-transform: uppercase;
        font-weight: 600;
        margin: 12px;
      }
    }
  }
  .control-input {
    height: 50px;
    background: $light-background;
    border-bottom: 1px solid $light-border;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    .input {
      background: $light-background;
      border-bottom: 0 none;
      position: absolute;
      left: 0;
      top: 0;
      height: 50px;
      line-height: 50px;
      padding: 7px 15px 3px;
      font-size: $spring-font-size + 2;
      padding-right: 210px;
      &::placeholder {
        font-size: $spring-font-size;
      }
    }
    .help {
      position: absolute;
      z-index: 2;
      right: 15px;
      top: 0;
      height: 50px;
      line-height: 56px;
    }
    .close {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 25px;
      padding: 5px;
      cursor: pointer;
      svg {
        display: block;
        .st0 {
          stroke: $light-color;
        }
      }
    }
  }
}

// Quick Search

ul.dependencies-list {
  margin: 0;
  padding: 0;
  padding-bottom: 2rem;

  &:hover {
    li a {
      opacity: 1;
    }
  }
  li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid $light-border;
    div {
      position: relative;
      padding: 1rem 0;
      padding-right: 50px;
      line-height: 1.5rem;
      strong,
      span {
        display: block;
      }
      strong {
        font-weight: 600;
        font-size: $spring-font-size + 2;
        margin-bottom: 2px;
      }
      span.group {
        display: inline-block;
        background: $light-primary;
        font-size: $spring-font-size - 2;
        padding: 4px 0.6rem 1px;
        line-height: 18px;
        margin-left: 0.6rem;
        text-transform: uppercase;
        color: #fff;
      }
      span.invalid {
        color: #d60000;
        font-weight: 500;
      }
      &.disabled {
        color: rgba($light-color, 0.4);
        strong {
          color: rgba($light-color, 0.4);
        }
        span.group {
          background: $light-border;
          color: rgba(#fff, 0.6);
        }
      }
    }

    a {
      $size: 42px;
      display: block;
      position: absolute;
      width: $size;
      right: 0;
      top: 50%;
      margin-top: -(calc($size / 2));
      opacity: 0;
      @include outline;
      @include transition(all 150ms);
      .a-content {
        display: block;
        outline: none;
        box-shadow: none;
        padding: 8px;
      }
      svg {
        display: block;
        .st0 {
          fill: #d75b49;
        }
        .st1 {
          fill: none;
          stroke: #ffffff;
          stroke-width: 30;
          stroke-linecap: round;
          stroke-miterlimit: 10;
        }
      }
      &:hover {
        svg {
          .st0 {
            fill: #d53720;
          }
        }
      }
      &:focus {
        opacity: 1;
      }
    }
  }
  .fade-enter {
    max-height: 0;
    opacity: 0;
  }

  .fade-enter-active {
    max-height: 200px;
    opacity: 1;
    transition: all 250ms;
  }

  .fade-exit {
    max-height: 200px;
    opacity: 1;
  }

  .fade-exit-active {
    max-height: 0;
    opacity: 0;
    transition: all 250ms;
  }
}

.dependency-header {
  border-bottom: 1px solid $light-border;
  padding-bottom: 0.5rem;
  .label {
    display: inline-block;
    line-height: 41.5px;
    vertical-align: top;
    margin-right: 1rem;
  }
  .button,
  .placeholder-button {
    float: right;
    margin-right: 0;
  }
}

.no-dependency {
  padding: 1rem 0;
  font-style: italic;
}

// Overlay

.overlay {
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(#ebf2f2, 0.8);
  &-enter {
    opacity: 0;
  }

  &-enter-active {
    opacity: 1;
    transition: all 200ms;
  }

  &-exit {
    opacity: 1;
  }

  &-exit-active {
    opacity: 0;
    transition: all 200ms;
  }
}

// Placeholder

.placeholder-radio {
  position: relative;
  display: inline-block;
  background: $light-placeholder;
  height: 16px;
  margin-top: 6px;
  margin-right: 30px;
  margin-left: 25px;
  margin-bottom: -2px;
  &:after {
    position: absolute;
    content: ' ';
    width: 16px;
    height: 16px;
    background: $light-placeholder;
    left: -24px;
    top: 0;
    border-radius: 10px;
  }
  &:last-child {
    margin-right: 0;
  }
}

.placeholder-label {
  display: block;
  font-weight: 400;
  height: 32.5px;
  white-space: nowrap;
}

.placeholder-label-2 {
  height: 28px;
}

.control-placeholder {
  .placeholder-input {
    margin-left: 1.3rem;
    flex: 1;
    max-width: 520px;
  }
  .placeholder-label {
    white-space: nowrap;
    font-weight: 500;
    flex: 110px 0;
    text-align: right;
  }
}

.placeholder-input {
  position: relative;
  display: block;
  background: $light-background;
  height: 32.5px;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 100%;
  box-shadow: inset 0 -4px 0 0 $light-placeholder;
  &:after {
    content: ' ';
    height: 16px;
    width: 100px;
    background: $light-placeholder;
    position: absolute;
    top: 4px;
    left: 0;
  }
}

.placeholder-button {
  position: relative;
  display: inline-block;
  height: 41.5px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px $light-placeholder;
  background: $light-background;
  vertical-align: top;
  &:after {
    content: ' ';
    height: 16px;
    background: $light-placeholder;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 20px;
    right: 20px;
  }
}

.actions {
  .placeholder-button {
    height: 47.5px;
    box-shadow: inset 0 0 0 2px $light-border;
    margin-right: 1rem;
    &:after {
      background: $light-border;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}

.placeholder-button {
  &-submit {
    width: 200.44px;
  }
  &-explore {
    width: 249.42px;
  }
  &-share {
    width: 119px;
  }
  &-dep {
    width: 241.8px;
  }
  &-download {
    width: 212.27px;
  }
}

.actions {
  .placeholder-button-special {
    line-height: 51px;
    font-size: $spring-font-size + 1;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    border-color: $light-color;
    box-shadow: inset 0 0 0 2px $light-color;
    &:after {
      display: none;
    }
  }
}

.placeholder-text {
  display: inline-block;
  height: 14px;
  background: $light-placeholder;
}